<template>
  <div class="list-cart">
    <CardItem
      v-for="(item, index) in cardListData"
      :key="index"
      :title="item.title"
      :button-list="item.buttonList"
      v-model:button-select-id="item.buttonSelectId"
      :list-data="item.listData"
    />
  </div>
</template>

<script setup>
  import CardItem from '@/views/home/components/CardItem.vue';
  import { listData } from './data/index.js';

  const cardListData = reactive([
    {
      buttonList: [
        { name: '危急严重缺陷', id: 1 },
        { name: '故障跳闸', id: 2 },
        { name: '超期梯形', id: 3 }
      ],
      buttonSelectId: 1,
      title: '重点事项',
      listData: listData
    },
    {
      buttonList: [
        { name: '巡视', id: 1 },
        { name: '操作', id: 2 },
        { name: '消除', id: 3 },
        { name: '带点检查', id: 4 },
        { name: '停电实验', id: 5 },
        { name: '停电检修', id: 6 }
      ],
      buttonSelectId: 2,
      title: '今日工作',
      listData: listData
    },
    {
      buttonList: [
        { name: '运维', id: 1 },
        { name: '检查', id: 2 },
        { name: '实验', id: 3 },
        { name: '检修', id: 4 }
      ],
      buttonSelectId: 1,
      title: '工作票',
      listData: listData
    },
    {
      buttonList: [
        { name: '临近维护', id: 1 },
        { name: '超期未维护', id: 2 }
      ],
      buttonSelectId: 1,
      title: '设备维护',
      listData: listData
    }
  ]);
</script>

<style lang="scss" scoped>
  .list-cart {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;

    ::v-deep(.card-item) {
      margin: 10px;
      width: calc(50% - 20px);

      &:nth-child(1),
      &:nth-child(2) {
        margin-top: 0;
      }
    }
  }
</style>
